<template>
  <el-form :model="form" label-width="120px">
  
        <JmInput
          jmname="前端路由"
          v-model="form.name"
          placeholder="sad"
          type="text"
        ></JmInput>
        <JmInput
          jmname="标题"
          v-model="form.title"
          placeholder="sad"
          type="text"
        ></JmInput> 
        
        <JmInput
          jmname="备注"
          v-model="form.remark"
          placeholder="sad"
          remark="备注" 
          type="text"
        ></JmInput>
        <JmInput
          jmname="接口路径"
          v-model="form.apipath"
          placeholder="sad"
          remark="备注"
          type="text"
        ></JmInput>

        <JmInput
          jmname="权重"
          v-model="form.weigh"
          placeholder="sad"
          remark="备注"
          type="text"
        ></JmInput>

 		
        <!-- pid:1,     -->
<JmEnum
          jmname="是否是菜单"
          v-model="form.ismenu"
          :jv="{ 1: '菜单', 2: '按钮' }"
          jtype="3"
          br
        ></JmEnum>

<JmEnum
          jmname="状态"
          v-model="form.status"
          :jv="{ 1: '是', 0: '否' }"
          jtype="3"
          br
        ></JmEnum>
  <el-form-item  label="父id"> 
  <el-select v-model="form.pid" placeholder="Select">
    <el-option
      v-for="item in cities"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
      <span style="float: left">{{ item.label }}</span>
      <span
        style="
          float: right;
          color: var(--el-text-color-secondary);
          font-size: 13px;
        "
        >{{ item.value }}</span
      >
    </el-option>
  </el-select>  
  </el-form-item>
 

      <el-form-item>
        <el-button type="primary" @click="onSubmit">Create</el-button>
        <el-button>Cancel</el-button>
      </el-form-item>
 
  </el-form>
</template>
 
<script>
import JmInput from "../../../components/form/JmInput.vue";
import JmEnum from "../../../components/form/JmEnum.vue";
export default {
  components: { JmInput, JmEnum },
  data() {
    return {
      form: {
       ismenu:1,		
        pid:2,	
        name	:1,
        title	:1,	
        remark	:1,
        weigh	:1,	
        status	:1,	
        apipath:1,
      },
      cities :[
               
            ]
    };
  },

    props: ['edit_id'],
     inject:['handleClose'],
  mounted() {
    this.getDataList();
  },
  methods: {
    // 配置信息列表初始化
    async getDataList() {
      try {
        
      console.log(this.edit_id,"接收");
        //获取下拉选项
        const res = await this.$api.getRule(); 
        let ccc=[];
       
          res.rows.forEach(element => {
            let cccz=[];
            cccz["value"]=element.id;
            cccz["label"]=element.title;
            ccc.push(cccz);  
          });
      console.log(ccc)
         this.cities=ccc;
         /*查看单条数据*/
        const find = await this.$api.editRuleFind({ids:this.edit_id}); 
        this.form=find;

      } catch (error) {
        /*console.error(error);*/
      }
    },
   async onSubmit() {
       const find =  await this.$api.editRule(this.form,this.edit_id);  
     
             this.$emit("handleClose","如果需要传值，参数写在这里"); 
    },
  },
};
</script>
<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}
.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
</style>